<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长途汽车售票系统</title>
    <link rel="stylesheet" href="../css/plugins/bootstrap.min.css">
    <link href="../css/plugins/animate.css" rel="stylesheet">
    <link href="../css/plugins/style.css?v=4.1.0" rel="stylesheet">
    <script src="../js/jquery.js"></script>
    <script src="../js/plugins/bootstrap.min.js"></script>

</head>
<body style="background-color: #f1f1f1">
<nav class="nav navbar-inverse">
    <div class="container-fluid">
        <!-- Header -->
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">长途汽车购票系统</a>
        </div>
        <!-- Items -->
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="index.html">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp; 购票
                </a>
            </li>
            <li id="welcomeText">
                <a href="#">欢迎您 :<span id="user"></span></a>
            </li>
            <li id="userBtn">
                <a href="perInfo.html">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp; 个人中心
                </a>
            </li>
            <li id="orderBtn">
                <a href="orderlist.html">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>&nbsp; 我的订单
                </a>
            </li>
            <li id="mailboxBtn">
                <a href="mailbox.html">
                    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>&nbsp; 我的信箱
                </a>
            </li>
            <li id="logoutBtn">
                <a href="javascript:void(0)" onclick="returnIndex()">
                    <span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp; 退出
                </a>
            </li>
            <li id="loginBtn">
                <a href="login.html">
                    <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>&nbsp; 登录
                </a>
            </li>
        </ul>
    </div>
</nav>


<style>

    .main {
        margin-left: 50px;
        margin-right: 50px;
    }

    .search_form {
        background-color: white;
        margin-top: 25px;
        height: 90px;
    }

    .search_head {
        background-color: #f1f1f1;
        margin-top: 10px;
        height: 30px;
        text-align: center;
        font-weight: bold;
    }

    .search_result_by_ltime { /*背景色与网页背景色相同*/
        background-color: #f1f1f1;
        margin-top: 10px;
    }

    .search_result_by_price { /*背景色与网页背景色相同*/
        background-color: #f1f1f1;
        margin-top: 10px;
    }

    .one_line {
        background-color: white;
        height: 90px;
        margin-top: 10px;
        text-align: center;
    }

    .ico_search_type {
        display: inline-block; /*同行显示*/
        width: 20px;
        height: 20px;
        background: url('http://pic.c-ctrip.com/flight/searchlist/icon_search_select.png') no-repeat;
    }

    .ico_search_lcity {
        background-position: 0 0;
    }

    .ico_search_acity {
        background-position: 0 -20px;
    }

    .ico_search_ldate {
        background-position: 0 -40px;
    }

    .my_input {
        position: absolute;
        width: 80%;
    }

    .btn-warning {
        background-color: #ffb000;
    }

    .flight_name {
        line-height: 90px;
        font-size: x-large;
        font-weight: bold;
    }


</style>

<div class="main">
    <!--搜索框-->
    <div class="search_form">
        <div class="col-sm-12" style="margin-top: 20px">
            <form id="queryform" class="form-horizontal" role="form">
                <div class="col-sm-3">
                    <span class="ico_search_type ico_search_lcity"></span><br>
                    <input class="my_input" type="text" id="source" name="leave_city" placeholder="出发站"
                           value="">
                </div>
                <div class="col-sm-3">
                    <span class="ico_search_type ico_search_acity"></span><br>
                    <input class="my_input" type="text" id="target" name="arrive_city" placeholder="到达站"
                           value="">
                </div>
                <div class="col-sm-3">
                    <span class="ico_search_type ico_search_ldate"></span><br>
                    <input class="my_input" type="date" id="date" name="leave_date" placeholder="日期"
                           value="">
                </div>
                <div class="col-sm-3">
                    <div style="position: absolute;margin-top: 10px;margin-left: 35%">
                        <button class="btn btn btn-info" type="submit" value="">重新搜索</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!--标题行(标明4种排序方式)-->
    <div class="search_head" id="search_head">
        <div class="col-sm-12">
            <button class="col-sm-3 btn btn-primary">车次信息</button>
            <button class="col-sm-3 btn btn-success" onclick="search_by_ltime()">出发信息</button>
            <button class="col-sm-3 btn btn-danger" onclick="search_by_atime()">到达信息</button>
            <button class="col-sm-3 btn btn-warning" onclick="search_by_price()">价格</button>
        </div>

    </div>

    <!--如果没有查找到-->
    <div class="alert" id="search_failure" style="margin-top: 20px; background-color:white;">
        <h1 id="test">尊敬的旅客</h1>
        <p style="margin-left: 50px">
            很抱歉，我们目前没有开通这趟车次，请尝试选择其他车次，祝您旅途愉快！
        </p>
    </div>

    <!--显示结果-->
    <div class="search_result" id="searchResult"></div>

</div>
<!--显示车次途经站的模态框 -->
<div class="modal fade" id="tripViaShowModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="tripReviseModalLabel">查看车次途经站</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="table-responsive col-md-12">
                        <table class="table table-hover" id="trips_via_table">
                            <tbody>
                            <thead>
                            <tr>
                                <th>站点名称</th>
                                <th>到达时间</th>
                                <th>出发时间</th>
<!--                                <th>次序</th>-->
                            </tr>
                            </thead>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<script src="../js/plugins/bootstrap.min.js"></script>
<script src="../js/plugins/slick.min.js"></script>
<script src="../js/plugins/jquery.form.js"></script>
<script src="../js/plugins/jquery.validate.min.js"></script>
<script src="../js/custom.js"></script>
<script src="../js/page/result.js"></script>
<script language="JavaScript">
    fillerIn();
</script>



</body>
</html>